<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const canvas = ref(null); // canvas元素的引用

    let ctx; // canvas的2D上下文
    let streams = []; // 存储字符流对象的数组

    const langs = [
      "Hello World",
      "مرحبا بالعالم",
      "Salam Dünya",
      "Прывітанне Сусвет",
      "Здравей свят",
      "ওহে বিশ্ব",
      "Zdravo svijete",
      "Hola món",
      "Kumusta Kalibutan",
      "Ahoj světe",
      "Helo Byd",
      "Hej Verden",
      "Hallo Welt",
      "Γειά σου Κόσμε",
      "Hello World",
      "Hello World",
      "Hola Mundo",
      "Tere, Maailm",
      "Kaixo Mundua",
      "سلام دنیا",
      "Hei maailma",
      "Bonjour le monde",
      "Dia duit an Domhan",
      "Ola mundo",
      "હેલો વર્લ્ડ",
      "Sannu Duniya",
      "नमस्ते दुनिया",
      "Hello World",
      "Pozdrav svijete",
      "Bonjou Mondyal la",
      "Helló Világ",
      "Բարեւ աշխարհ",
      "Halo Dunia",
      "Ndewo Ụwa",
      "Halló heimur",
      "Ciao mondo",
      "שלום עולם",
      "こんにちは世界",
      "Hello World",
      "Გამარჯობა მსოფლიო",
      "Сәлем Әлем",
      "សួស្តី​ពិភពលោក",
      "ಹಲೋ ವರ್ಲ್ಡ್",
      "안녕하세요 월드",
      "Ciao mondo",
      "ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ",
      "Labas pasauli",
      "Sveika pasaule",
      "Hello World",
      "Kia Ora",
      "Здраво свету",
      "ഹലോ വേൾഡ്",
      "Сайн уу",
      "हॅलो वर्ल्ड",
      "Hai dunia",
      "Hello dinja",
      "မင်္ဂလာပါကမ္ဘာလောက",
      "नमस्कार संसार",
      "Hallo Wereld",
      "Hei Verden",
      "Moni Dziko Lapansi",
      "ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ",
      "Witaj świecie",
      "Olá Mundo",
      "Salut Lume",
      "Привет, мир",
      "හෙලෝ වර්ල්ඩ්",
      "Ahoj svet",
      "Pozdravljen, svet",
      "Waad salaaman tihiin",
      "Përshendetje Botë",
      "Здраво Свете",
      "Lefatše Lumela",
      "Halo Dunya",
      "Hej världen",
      "Salamu, Dunia",
      "ஹலோ வேர்ல்ட்",
      "హలో వరల్డ్",
      "Салом Ҷаҳон",
      "สวัสดีชาวโลก",
      "Kamusta Mundo",
      "Selam Dünya",
      "Привіт Світ",
      "ہیلو ورلڈ",
      "Salom Dunyo",
      "Chào thế giới",
      "העלא וועלט",
      "Mo ki O Ile Aiye",
      "你好，世界",
      "你好，世界",
      "你好，世界",
      "你好，CIC",
      "Sawubona Mhlaba"
    ];

    const charSize = 20; // 将字符大小设置为较小的值




    // 字符类
    class Char {
      constructor(value, x, y, speed) {
        this.value = value; // 字符的值
        this.x = x; // 字符的x坐标
        this.y = y; // 字符的y坐标
        this.speed = speed; // 字符的下落速度
      }

      // 绘制字符
      draw() {
        ctx.fillText(this.value, this.x, this.y); // 绘制字符

        // 字符下落
        this.y = this.y > canvas.value.height ? 0 : this.y + this.speed;
      }
    }

    // 字符流类
    class Stream {
      constructor(text, x) {
        const y = Math.random() * (text.length * 4); // 初始y坐标
        const speed = Math.random() * 8 + 3; // 字符流的下落速度
        this.chars = []; // 存储字符对象的数组

        // 创建字符对象并加入到字符流中
        for (let i = text.length - 1; i >= 0; i--) {
          this.chars.push(
              new Char(text[i], x, (y + text.length - i) * charSize, speed)
          );
        }
      }

      // 绘制字符流
      draw() {
        ctx.fillStyle = 'hsl(120,96%,38%)'; // 设置填充颜色
        this.chars.forEach((c, i) => {
          c.draw(); // 绘制字符
        });
      }
    }

// 创建字符流
    function createStreams() {
      // 如果langs数组为空或者没有元素，则不创建字符流
      if (langs.length === 0) return;

      // 增加步长以减少字符流之间的间距
      for (let i = 0; i < canvas.value.width; i += charSize / 2) {
        const randomIndex = Math.floor(Math.random() * langs.length);
        const randomText = langs[randomIndex];
        if (randomText && randomText.length > 0) {
          streams.push(new Stream(randomText, i));
        }
      }
    }

    // 重置字符流
    function reset() {
      streams = []; // 清空字符流数组
      createStreams(); // 重新创建字符流
    }
    let timer = "";
    // 组件挂载时执行的操作
    onMounted(() => {
      ctx = canvas.value.getContext('2d'); // 获取canvas的2D上下文
      canvas.value.width = window.innerWidth; // 设置canvas宽度为窗口宽度
      canvas.value.height = window.innerHeight; // 设置canvas高度为窗口高度
      ctx.font = `${charSize}px monospace`; // 设置字体样式
      reset(); // 创建字符流
      timer=setInterval(draw, 30); // 每20ms绘制一次
    });

    // 组件销毁时执行的操作
    onUnmounted(() => {
      streams = []; // 清空字符流数组
      clearInterval(timer);//清除定时器
      // ctx.clearRect(0, 0, canvas.value.width, canvas.value.height); // 清空canvas
    });

    // 绘制函数
    function draw() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; // 设置填充颜色
      ctx.fillRect(0, 0, canvas.value.width, canvas.value.height); // 绘制背景
      streams.forEach((s) => s.draw()); // 绘制字符流
    }

    // 窗口大小改变时执行的操作
    window.addEventListener('resize', () => {
      canvas.value.width = window.innerWidth; // 更新canvas宽度为窗口宽度
      canvas.value.height = window.innerHeight; // 更新canvas高度为窗口高度
      reset(); // 重新创建字符流
    });

    return {
      canvas
    };
  }
};
</script>

<style scoped>
canvas {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
